.product-details-visual { padding-block:clamp(48px,6vw,88px); }
.product-details-visual header { text-align:center; margin:0 auto 40px; max-width:650px; }
.product-details-visual h2 { font-size:clamp(28px,3vw,42px); line-height:1.2; margin-bottom:16px; }
.product-details-visual header p { color:#5f6980; font-size:18px; line-height:1.65; }
.product-details-visual__layout { display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,6vw,96px); align-items:center; background:#f2f4f7; border-radius:28px; padding:clamp(24px,4vw,64px); }
.product-details-visual__image { display:block; height:510px; width:100%; object-fit:contain; }
.product-details-visual ol { display:grid; gap:28px; list-style:none; padding:0; margin:0; }
.product-details-visual li { display:flex; gap:20px; align-items:baseline; }
.product-details-visual li > span { color:#1681ac; font-size:13px; font-weight:700; }
.product-details-visual h3 { font-size:21px; line-height:1.4; margin-bottom:8px; }
.product-details-visual li p { color:#5f6980; font-size:16px; line-height:1.65; }
@media(max-width:767px) { .product-details-visual__layout { grid-template-columns:1fr; } .product-details-visual__image { height:340px; } }

.product-anatomy { padding-block:64px; }
.product-anatomy header { text-align:center; margin:0 auto 40px; max-width:650px; }
.product-anatomy h2 { font-size:clamp(28px,3vw,42px); line-height:1.2; margin-bottom:16px; }
.product-anatomy header p { color:#5f6980; font-size:18px; line-height:1.65; }
.product-anatomy__canvas { background:#f2f4f7; border-radius:28px; padding:48px 32px; }
.product-anatomy__figure { position:relative; width:42%; margin:0 auto; }
.product-anatomy__image { display:block; width:100%; height:auto; }
.product-anatomy--narrow .product-anatomy__figure { width:26%; }
.product-anatomy--narrow .product-anatomy__label { width:112%; }
.product-anatomy__point { position:absolute; inset:var(--y) 0 auto; }
.product-anatomy__number { position:absolute; left:var(--x); top:0; transform:translate(-50%,-50%); display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:#fff; border:2px solid #28ace3; color:#161616; font-size:12px; font-weight:600; }
.product-anatomy__line { position:absolute; top:0; height:1px; background:#28ace3; }
.product-anatomy__number { padding:0; cursor:pointer; }
.product-anatomy__number::after { content:""; position:absolute; inset:-8px; }
.product-anatomy__number,.product-anatomy__line { opacity:.65; transition:opacity .18s ease; }
.product-anatomy__point:focus-within .product-anatomy__number,
.product-anatomy__point:focus-within .product-anatomy__line { opacity:1; }
.product-anatomy__number:focus-visible { outline:2px solid #28ace3; outline-offset:4px; opacity:1; }
@media(hover:hover) and (pointer:fine) {
 .product-anatomy__point:hover .product-anatomy__number,
 .product-anatomy__point:hover .product-anatomy__line,
 .product-anatomy__point:focus-within .product-anatomy__number,
 .product-anatomy__point:focus-within .product-anatomy__line { opacity:1; }
}
@media(prefers-reduced-motion:reduce) { .product-anatomy__number,.product-anatomy__line { transition:none; } }
.product-anatomy__point--left .product-anatomy__line { left:-5%; width:calc(var(--x) + 5%); }
.product-anatomy__point--right .product-anatomy__line { left:var(--x); width:calc(105% - var(--x)); }
.product-anatomy__label { position:absolute; width:60%; top:0; transform:translateY(-50%); }
.product-anatomy__point--left .product-anatomy__label { right:107%; text-align:right; }
.product-anatomy__point--right .product-anatomy__label { left:107%; text-align:left; }
.product-anatomy__label strong { display:block; font-size:18px; line-height:1.35; font-weight:600; }
.product-anatomy__label p { color:#5f6980; font-size:14px; line-height:1.5; margin-top:6px; }
@media(min-width:1024px) and (max-width:1199px) {
 .postid-215877 .product-anatomy__label strong { font-size:14px; }
 .postid-215877 .product-anatomy__label p { font-size:12px; line-height:1.3; margin-top:3px; }
}
.product-anatomy__legend { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); }
@media(max-width:1023px) {
 .product-anatomy { padding-block:40px; }
 .product-anatomy__canvas { padding:28px 20px; }
 .product-anatomy__figure { width:75%; max-width:300px; }
 .product-anatomy--narrow .product-anatomy__figure { width:55%; max-width:180px; }
 .product-anatomy__line,.product-anatomy__label { display:none; }
 .product-anatomy__legend { position:static; width:auto; height:auto; margin:32px 0 0; padding:0; overflow:visible; clip-path:none; list-style:none; display:grid; gap:20px; }
 .product-anatomy__legend li { display:flex; gap:14px; align-items:flex-start; }
 .product-anatomy__legend li > span { display:grid; place-items:center; flex:0 0 28px; height:28px; background:white; border:2px solid #28ace3; border-radius:50%; font-size:12px; font-weight:600; }
 .product-anatomy__legend h3 { font-size:17px; line-height:1.5; }
 .product-anatomy__legend p { color:#5f6980; font-size:14px; line-height:1.5; margin-top:4px; }
}

.product-anatomy__controls { display:none; }
@media(hover:hover) and (pointer:fine) {
 .product-anatomy__label { cursor:pointer; }
 .product-anatomy__point:hover .product-anatomy__label strong { color:#28ace3; }
}
.product-anatomy__point:focus-within .product-anatomy__label strong { color:#28ace3; }
@media(max-width:1023px) {
 .product-anatomy[x-data] .product-anatomy__legend { min-height:0; }
 .product-anatomy[x-data] .product-anatomy__legend li:not(.is-active) { display:none; }
 .product-anatomy__point.is-active .product-anatomy__number { opacity:1; }
 .product-anatomy__legend .is-active h3 { color:#1681ac; }
 .product-anatomy__controls { display:flex; align-items:center; justify-content:space-between; gap:20px; width:100%; margin-top:32px; color:#5f6980; font-size:13px; }
 .product-anatomy__controls button { min-width:44px; min-height:44px; padding:8px; border:1px solid #ddd; border-radius:24px; background:white; color:#161616; }
 .product-anatomy__controls .product-anatomy__playback { display:inline-flex; align-items:center; justify-content:center; gap:10px; padding-inline:14px; border-color:transparent; background:transparent; color:#5f6980; font-variant-numeric:tabular-nums; }
 .product-anatomy__legend .is-active { animation:product-detail-in .25s ease both; }
}
@keyframes product-detail-in { from { opacity:0; transform:translateX(10px); } to { opacity:1; transform:translateX(0); } }
@media(prefers-reduced-motion:reduce) { .product-anatomy__legend .is-active { animation:none; } }
@media(max-width:1023px) {
 .product-anatomy__point:not(.is-active) .product-anatomy__number:not(:focus-visible) { opacity:.65; }
}